<template>
	<view class="user">
		<view class="header">
			<u-avatar class="avatar" :src="userInfo.icon" size="200"></u-avatar>
			<p class="name">{{userInfo.name}}</p>
		</view>

		<u-cell-group>
			<u-cell-item icon="setting-fill" title="修改个人资料" @click="goEdit"></u-cell-item>
			<u-cell-item icon="close-circle-fill" title="退出" @click="logoutShow = true"></u-cell-item>
		</u-cell-group>
		
		
		<u-modal v-model="logoutShow" show-cancel-button="true" title="确定要退出吗?" async-close="true" @confirm="logout">
			<p style="text-align: center;"></p>
		</u-modal>
		
		<u-toast ref="uToast" />

		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				userInfo: "",
				logoutShow:false
			}
		},
		methods: {
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit"
				})
			},
			logout() {
				uni.clearStorageSync()
				
				this.$refs.uToast.show({
					title: "退出成功",
					type: 'success',
					url: '/pages/login/login'
				})
				
				this.logoutShow = false
			}
		},
		onShow(){
			this.userInfo = uni.getStorageSync("userInfo")
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		.header {
			background: #A0CFFF;
			text-align: center;
			padding: 20rpx 0;

			.name {
				font-size: 40rpx;
			}
		}
	}
</style>
